<template>
  <!--页面大框 -->
  <div class="kuangjia">
    <!--第一部分：搜索条件 -->
    <div class="one" style="display: inline-block">
      <!--表单部分：搜索条件 -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <!--左半部分搜索条件 -->
        <div class="one-left" style="display: inline-block">
<!--          &lt;!&ndash;时间选择器（起始日期） &ndash;&gt;-->
<!--          <el-form-item label="入店时间" prop="startTime">-->
<!--            <el-date-picker clearable-->
<!--                            v-model="startTime"-->
<!--                            type="date"-->
<!--                            value-format="yyyy-MM-dd"-->
<!--                            placeholder="请选择入店时间">-->
<!--            </el-date-picker>-->
<!--          </el-form-item>-->


          <!--班次选择（起始班次）
          <el-form-item label=" " prop="entryName" label-width="20px" style="margin-left: -7%">
            <el-select v-model="value3" placeholder="起始班次" style="display: inline-block;width: 50% ">
              <el-option
                v-for="item in options3"
                :key="item.value3"
                :label="item.label"
                :value="item.value3">
              </el-option>
            </el-select>
          </el-form-item>-->

          <!--      <el-form-item label="~" label-width="10px" style="margin-left: -5%"></el-form-item>-->
<!--          &lt;!&ndash;时间选择器（结束日期） &ndash;&gt;-->
<!--          <el-form-item label=" ~ " prop="entryName" label-width="18px" style="margin-left: -8%">-->
<!--            <div class="block">-->
<!--              <el-date-picker-->
<!--                style="width: 70%"-->
<!--                v-model="value2"-->
<!--                type="date"-->
<!--                placeholder="结束日期">-->
<!--              </el-date-picker>-->
<!--            </div>-->
<!--          </el-form-item>-->

          <!--班次选择（结束班次）
          <el-form-item label=" " prop="entryName" label-width="20px" style="margin-left: -7%">
            <el-select v-model="value4" placeholder="结束班次" style="display: inline-block;width: 50% ">
              <el-option
                v-for="item in options4"
                :key="item.value4"
                :label="item.label"
                :value="item.value4">
              </el-option>
            </el-select>
          </el-form-item>-->

<!--          &lt;!&ndash;部门选择&ndash;&gt;-->
<!--          <el-form-item label="部门" prop="entryName" label-width="40px" style="margin-left: -7%">-->
<!--            <el-select v-model="value5" placeholder="选择部门" style="display: inline-block;width: 50%">-->
<!--              <el-option-->
<!--                v-for="item in options5"-->
<!--                :key="item.value5"-->
<!--                :label="item.label"-->
<!--                :value="item.value5">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
        </div>

        <!--第一部分的右半部分（按钮）-->
        <div class="one-right">
          <el-row>
<!--            <el-button type="primary" size="small" @click="getprojectList">查询</el-button>-->
<!--            <el-button type="primary" size="small" @click="getjiezhangList">查询结账</el-button>-->
<!--            <el-button type="primary" size="small" @click="getbumenList">查询部门</el-button>-->
<!--            <el-button type="primary" size="small">搜索</el-button>-->
<!--            <el-button size="small">重置</el-button>-->
<!--            <el-button type="success" size="small">导出</el-button>-->
          </el-row>
        </div>
      </el-form>
    </div>
    <!--第一部分结束-->

    <!--第二部分开始：标签页-->
    <div class="biaoqianye">
      <el-tabs type="border-card">
        <!--收入标签页-->
        <el-tab-pane label="收入">
          <!--缺少营业额字段、净额字段、比重字段；赠送在会员表；
              金额有几个，用哪个：消费详细表中合计金额total_amount、吧台账单表中总消费金额total_consumption_amount -->
          <div class="biao">
            <!--标签页中左侧第一个表格 -->
            <div class="biao-one">
              <el-table
                :data="goodsList"
                height="830"
                border
                align="center"
                :cell-style="rowStyle"
                :summary-method="getSummaries"
                show-summary>
                <el-table-column
                  align="center"
                  prop="category"
                  label="类别">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="income"
                  label="营业额">
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="discount_amount"
                  label="折扣">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="give"
                  label="赠送">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="amount4"
                  label="净额">
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="commissionPrice"
                  label="提成">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="paid_in_amount"
                  label="实际收入">
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="amount5"
                  label="比重">
                </el-table-column>

              </el-table>
            </div>

            <!--标签页中中间的表格 -->
            <div class="biao-two">
              <el-table
                :data="goodsList2"
                height="830"
                border
                align="center"
                :cell-style="rowStyle"
                :summary-method="getSummaries"
                show-summary>
                <!--            style="width: 30%; height: 80%;float: right"-->

                <el-table-column
                  align="center"
                  prop="department"
                  label="部门">
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="amount"
                  label="营业额">
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="projectCode"
                  label="折扣">
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="projectCategory"
                  label="项目类别">
                </el-table-column>
              </el-table>
            </div>

            <!--标签页中右侧第一个表格 -->
            <div class="biao-three">
              <el-table
                :data="goodsList1"
                height="830"
                border
                align="center"
                :cell-style="rowStyle"
                :summary-method="getSummaries"
                show-summary>
                <!--            style="width: 20%; height: 80%;"-->
                <el-table-column
                  align="center"
                  prop="paymentMethod"
                  label="结账方式">
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="money"
                  label="金额">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <!--收入标签页结束 -->

        <!--统计标签页-->
        <el-tab-pane label="统计">
          <div class="arrange">

            <!--左上方描述列表-->
            <div class="arrange-one">
              <el-descriptions class="margin-top" title="人数统计" :column="2" :size="small" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    开牌人数
                  </template>

                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions class="margin-top" :column="4" :size="small" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    男宾人数
                  </template>

                </el-descriptions-item>
                <!--        </el-descriptions>
                          <el-descriptions class="margin-top"  :column="2" :size="medium" border >-->

                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    女宾人数
                  </template>

                </el-descriptions-item>
                <!--          </el-descriptions>
                          <el-descriptions class="margin-top"  :column="2" :size="medium" border >-->
              </el-descriptions>

              <el-descriptions class="margin-top" :column="4" :size="small" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    儿童人数
                  </template>

                </el-descriptions-item>
                <!--          </el-descriptions>
                          <el-descriptions class="margin-top"  :column="2" :size="medium" border >-->

                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    散台人数
                  </template>

                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!--右上方描述列表-->
            <div class="arrange-two">
              <el-descriptions class="margin-top" title="结账人数统计" :column="4" :size="small" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    结账人数
                  </template>

                </el-descriptions-item>

                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    儿童
                  </template>

                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions class="margin-top" title="" :column="4" :size="small" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    男宾（普浴）
                  </template>

                </el-descriptions-item>

                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    男宾（温泉）
                  </template>

                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions class="margin-top" :column="4" :size="small" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    女宾（普浴）
                  </template>

                </el-descriptions-item>

                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    女宾（温泉）
                  </template>

                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!--左下方描述列表-->
            <div class="arrange-three">
              <el-descriptions class="margin-top" title="其中" :column="4" :size="small" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    男会员人数
                  </template>

                </el-descriptions-item>

                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    女会员人数
                  </template>

                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions class="margin-top" :column="4" :size="small" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    男搓（人数）
                  </template>

                </el-descriptions-item>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    女搓（人数）
                  </template>

                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions class="margin-top" :column="4" :size="small" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    男按摩人数
                  </template>

                </el-descriptions-item>

                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    女按摩人数
                  </template>

                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!--右下方描述列表-->
            <div class="arrange-four">
              <el-descriptions class="margin-top" title="金额" :column="2" :size="small" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    搓澡金额
                  </template>

                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions class="margin-top" :column="2" :size="small" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    按摩金额
                  </template>

                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions class="margin-top" :column="2" :size="small" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                  <template slot="label">
                    <i></i>
                    人均消费
                  </template>

                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>

        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>

<script>
  import {listDetails,listmoneyDetails,listbumenDetails} from "@/api/module/lyx/baobiao";
export default {
  data() {
    return {
      //返回的数组
      goodsList:[],
      goodsList1:[],
      goodsList2:[],
      startTime:'',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 表单参数
      form: {},
    };
  },
  created() {
    this.getprojectList();
    this.getjiezhangList();
    this.getbumenList();
  },
  methods: {
    /** 查询项目信息列表 */
    getprojectList() {
      this.loading = true;
      console.log("时间是"+this.queryParams.recordingTime)
      listDetails(this.queryParams).then(response => {
        this.goodsList = response.rows;
        console.log(this.goodsList)
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询项目信息列表 */
    getjiezhangList() {
      this.loading = true;
      let date = new Date(this.startTime);
      // this.queryParams.note1 = date.getTime()
      console.log("时间戳是"+this.queryParams.note1)
      listmoneyDetails(this.queryParams).then(response => {
        this.goodsList1 = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询项目信息列表 */
    getbumenList() {
      this.loading = true;
      listbumenDetails(this.queryParams).then(response => {
        this.goodsList2 = response.rows;
        console.log("1");
        this.total = response.total;
        this.loading = false;
      });
    },
    rowStyle() {
      return "text-align:center";
    },
    //算总价
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        }
      });
      return sums;
    }
  }
};
</script>

<style scoped>

/*页面大框样式*/
.kuangjia {
  display: flex;
  flex-direction: column;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 1%;
}

/*第一部分：搜索行样式*/
.one {
  display: inline-block;
  margin-top: 2%;
  height: 20%;
  width: 100%;
}

/*搜索行右侧按钮样式*/
.one-right {
  float: right;
  display: inline-block;
}

/*标签页样式*/
.biaoqianye {
  margin-top: 1%;
}

/*标签业内表格大框样式*/
.biao {
  margin-top: 5px;
}

/*表一样式（左侧表）*/
.biao-one {
  display: inline-block;
  width: 48%;
  height: 100%;
}

/*表二样式（中间表）*/
.biao-two {
  display: inline-block;
  width: 35%;
  margin-left: 1%;
  height: 100%;

}

/*表三样式（右侧表）*/
.biao-three {
  display: inline-block;
  width: 15%;
  margin-left: 1%;
  height: 100%;
}

/*标签业内描述列表大框样式*/
.arrange {
  width: 100%;
  height: 80%;
}

/*左上方描述列表样式*/
.arrange-one {
  width: 48%;
  margin-top: 12px;
  margin-left: 1%;
}

/*右上方描述列表样式*/
.arrange-two {
  margin-right: 1%;
  width: 48%;
  float: right;
  margin-top: -176px;
}

/*左下方描述列表样式*/
.arrange-three {
  width: 48%;
  margin-top: 23px;
  margin-left: 1%;
  margin-bottom: 4%;
}

/*右下方描述列表样式*/
.arrange-four {
  margin-right: 1%;
  width: 48%;
  float: right;
  margin-top: -252px;
}
/*描述列表表格颜色设置
::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
  border-color: #1e1e1e;
}
*/

.margin-top {
  width: 100%;
}
</style>
